<template>
	<draggable v-model="list" tag="transition-group" :component-data="{ name: 'fade', type: 'transition' }">
		<template #item="{ element }">
			<div>{{ element.name }}</div>
		</template>
	</draggable>
	<draggable v-model="list" @change="onChange" :move="onMove" tag="transition-group"
		:component-data="{ name: 'fade', type: 'transition' }">
		<template #item="{ element }">
			<div class="box">{{ element.name }}</div>
		</template>
	</draggable>
	<Table :columns="column" :data="list">
		<template #name="{ row, index }">
			<div class="box" draggable="true" @dragstart="onStart($event, index)" @dragover="onOver($event, index)"
				@drop="onEnd" @dragenter="onEnter($event, index)">{{
					row.name }}</div>
		</template>
	</Table>
</template>

<script>
import draggable from 'vuedraggable'
export default {
	components: {
		draggable
	},
	data() {
		return {
			column: [
				{
					title: `栏目1`,
					key: 'name',
					slot: 'name'
				},
			],
			list: [{
				name: 1
			}, {
				name: 2
			}, {
				name: 3
			}, {
				name: 4
			}, {
				name: 5
			}],
			sindex: 0
		}
	},
	methods: {
		onStart(e, index) {
			e.dataTransfer.setData('text', index)
			console.log(e.dataTransfer.getData('text'))
			//e.dataTransfer.effectAllowed = 'copy';
			this.sindex = index;
		},
		onOver(e, index) {
			e.preventDefault();
			let temp = this.list[this.sindex];
			this.list[this.sindex] = this.list[index];
			this.list[index] = temp;
			this.sindex = index;
		},
		onEnd(e) {
			e.preventDefault();
			console.log('text', e.dataTransfer.getData('text'));
			console.log(e);
		},
		onEnter(e, index) {
			e.preventDefault();
		},
		onChange(evt) {
			console.log(this.list);
		},
		onMove(e) { }
	}
}
</script>
<style lang="scss">
.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}
/* 1. 声明过渡效果 */
.fade-move,
.fade-enter-active,
.fade-leave-active {
	transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
/* 2. 声明进入和离开的状态 */
.fade-enter-from,
.fade-leave-to {
	opacity: 0;
	transform: scaleY(0.01) translate(30px, 0);
}
/* 3. 确保离开的项目被移除出了布局流
      以便正确地计算移动时的动画效果。 */
.fade-leave-active {
	position: absolute;
}
</style>